<template>
	<view>
		<view style="position:relative">
			<image src="/static/me/me.png" mode="" style="width: 100vw;height: 378rpx;z-index:-1;"></image>
		</view>
		<view class="card">
			<view class="flex align-center" style="padding:0 30rpx ;">
				<view class="" style="margin-top: -55rpx;">
					<u-avatar v-if="listData.logo" :src="listData.logo" size="80">
					</u-avatar>
					<u-avatar v-if="listData.image" :src="listData.image" size="80">
					</u-avatar>
				</view>
				<view style="margin-left: 10rpx;display: flex;justify-content: space-between;width: 100%;">
					<uni-text
						style="font-size: 36rpx;color: #1E1E1E;font-weight:650;margin-left:10rpx;margin-top: -10rpx;">
						{{listData.userName}}{{listData.shopsName}}{{listData.name}}</uni-text>
					<!-- <view class="flex align-center" style="margin-top: 15rpx;">
						<image src="/static/me/7566.png" mode="aspectFit" style="width: 186rpx;height: 40rpx;"></image>
						<view class="label_a">设计达人</view>
					</view> -->
					<view style="font-size: 24rpx;color: rgba(30,30,30,0.4);width: 30%;">IP属地：重庆</view>
				</view>
			</view>
			<view @click="editSignature"
				style="font-size: 28rpx;color: #1E1E1E;padding: 30rpx;text-align: left;width: 650rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
				{{listData.signature}}{{listData.introduction}}
			</view>
			<view class="flex justify-between align-center" style="padding:0  30rpx;" @tap="goDetail()">
				<view class="flex align-center"></view>
				<view class="flex align-center">
					<view style="color: #167EC1;font-size: 28rpx;">前往主页</view>
					<image src="/static/me/right.png" mode="aspectFit" style="width: 64rpx;height: 64rpx;"></image>
				</view>
			</view>
		</view>
		<view style="margin: 30rpx;">
			<view style="margin-top: 30rpx;" @click="vipIndex" v-if="type == 4">
				<image src="/static/me/Check.png" mode="aspectFit" style="width: 690rpx;height: 152rpx;"></image>
			</view>
			<!-- 用户 -->
			<view class="debriefing" v-if="type==4">
				<view class="flex justify-between align-center" style="padding:22rpx 30rpx ;">
					<view style="color: #1E1E1E;font-size: 28rpx;">订单进展</view>
					<image src="/static/me/7289.png" mode="aspectFit" style="width: 64rpx;height: 64rpx;"></image>
				</view>
				<view class="debriefingConcent flex justify-between align-center justify-center"
					style="padding:0 30rpx ;" @tap="godingdan()">
					<view class="flex align-center">
						<image src="/static/cliend/c1.png" mode="aspectFit"
							style="width: 64rpx;height: 64rpx;border-radius: 5rpx;"></image>
						<view style="margin-left:30rpx;">
							<view style="color: #1E1E1E;font-size: 32rpx;">济南尊现代简约风格...</view>
							<view style="color: rgba(30,30,30,0.3);">62m²&nbsp;&nbsp;欧式</view>
						</view>
					</view>
					<view style="color: #1E1E1E;font-size: 24rpx;font-weight: 650;">正在加工</view>
				</view>
			</view>
			<!-- 设计师 -->
			<view v-if="type==1 || type==3 || type==2">
				<view style="display: flex;justify-content: space-between;padding:20rpx">
					<u-tabs inactive-color="rgba(30,30,30,0.3)" :list="list" @click="clickTab" lineHeight="7"
						lineWidth="75" lineColor="#9B5D45"></u-tabs>
					<text @click="revenue(tablist,revenueData)"
						style="font-size: 32rpx;color: rgba(30,30,30,0.3);line-height: 96rpx;">更多</text>
				</view>
				<view v-if="tablist==0" class="head" style="width:100%">
					<view class="head_s">
						<view style="width:230rpx;">
							<view class="title_">总营收(元)</view>
							<view class="title_l" v-if="revenueData.grossRevenue!=''">{{revenueData.grossRevenue}}
							</view>
							<view v-if="revenueData.grossRevenue==''" class="title_l">0
							</view>
						</view>
						<view style="width:230rpx;">
							<view class="title_">本月接单</view>
							<view class="title_l">0</view>
						</view>
						<view style="width:230rpx;">
							<view class="title_">进行中</view>
							<view class="title_l">1</view>
						</view>
					</view>
					<view class="flex" style="justify-content: space-between;margin:30rpx 20rpx 0 20rpx">
						<view class="flex" style="flex-direction: row; align-items: center; justify-content: center;">
							<image style="width:64rpx;height:64rpx;" src="/static/me/8059.png" mode=""></image>
							<view style="line-height: 40rpx;">
								<h4>望江三水二期</h4>
								<view style="font-size: 24rpx;color: rgba(30,30,30,0.3);">业主已经确定设计方案</view>
							</view>
						</view>
						<view class="view flex" style="align-items: center;">
							<image style="width:48rpx;height:48rpx;" src="/static/me/8055.png" mode=""></image>通知我
						</view>
					</view>
				</view>
				<view v-if="tablist==1" class="head" style="width:100%">
					<view class="head_s">
						<view style="width:230rpx;">
							<view class="title_">待下单</view>
							<view class="title_l">9,563.24</view>
						</view>
						<view style="width:230rpx;">
							<view class="title_">进行中的项目</view>
							<view class="title_l">0</view>
						</view>
						<view style="width:230rpx;">
							<view class="title_">竣工项目</view>
							<view class="title_l">1</view>
						</view>
					</view>
					<view class="flex" style="justify-content: space-between;margin:30rpx 20rpx 0 20rpx">
						<view class="flex" style="flex -direction: row; align-items: center; justify-content: center;">
							<image style="width:64rpx;height:64rpx;" src="/static/me/8058.png" mode=""></image>
							<view style="line-height: 40rpx;">
								<h4>望江三水二期</h4>
								<view style="font-size: 24rpx;color: rgba(30,30,30,0.3);">业主已经确定设计方案</view>
							</view>
						</view>
						<view class="view">查看</view>
					</view>
				</view>
			</view>
			<view style="font-size: 36rpx;font-weight:650;color: #1E1E1E;margin-top: 30rpx;">基础功能</view>
			<view class="function_con flex" style="flex-wrap: wrap;">
				<view class="flex align-center flex-direction justify-center" v-for="(item,index) in basicFunctions"
					:key="index" @tap="switchTab(item.id)" style="text-align: center;;width:170rpx;">
					<image :src="item.image" mode="aspectFit" style="width: 76rpx;height: 76rpx;"></image>
					<view style="font-size: 28rpx;color: #1E1E1E;margin-top: 20rpx;margin-bottom: 20rpx;">{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		watch: {
			type: {
				handler(newName, oldName) {
					this.person()
				}
			}
		},
		data() {
			return {
				revenueData: [],
				list: [{
					name: '营收'
				}, {
					name: '我的项目'
				}],
				tablist: 0,
				// 系统状态栏的高度
				systemBarHeight: 0,
				basicFunctions: [{
						image: '/static/me/bookmarkstar.png',
						name: '在线客服',
						id: 0
					},
					{
						image: '/static/me/bookmark-stars.png',
						name: '帮助与反馈',
						id: 1
					},
					{
						image: '/static/me/bookmark-star.png',
						name: '直播中心',
						id: 2
					},
					{
						image: '/static/me/bookmarkstars.png',
						name: '银行卡',
						id: 3
					},
					{
						image: '/static/me/bookmarkstars.png',
						name: '设置',
						id: 4,
					},
				],
				// 用户ID
				userId: null,
				listData: {},
				type: '',
			}
		},
		created() {
			this.getSysteminfo()
		},
		onReady() {
			this.person()
		},
		onLoad() {
			this.userId = this.$cache.get('id')
			this.type = this.$cache.get('type')
			this.person()
		},
		onShow() {
			this.type = this.$cache.get('type')
			this.person()
			if (this.type != 4) {
				this.getRevenueMe(1, 10)
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
			setTimeout(() => {
				this.person();
				this.getRevenueMe(1, 10)
			}, 100);
		},
		methods: {
			// 更多
			revenue(tablist, revenueData) {
				if (this.tablist == 0) {
					this.$tools.goPageNoAuth('/clientEnd/page/revenue/revenue?data=' + JSON.stringify(this
						.revenueData))
				} else {
					if (this.type == 2) {
						this.$tools.goPageNoAuth('/clientEnd/page/ordersList/orders')
					} else if (this.type == 1 || this.type == 3) {
						this.$tools.goPageNoAuth('/clientEnd/page/ordersList/project')
					}
				}
			},
			person() {
				this.$api.person().then((res) => {
					this.listData = res.data.result
					console.log('我的', res)
					this.$cache.set(this.listData.userName)
					// 关闭下拉
					uni.stopPullDownRefresh();
				})
			},
			// 营收
			getRevenueMe(num, size) {
				let data = {
					pageNo: num,
					pageSize: size
				}
				this.$api.revenueMe(data).then((res) => {
					res.data.result.pageResult.list.forEach((item) => {
						item.createTime = this.$tools.fileTime(item.createTime)
						item.receivedDate.forEach((items) => {
							items.time = this.$tools.fileTime(items.time)
						})
					})
					if (num == 1) {
						this.revenueData = res.data.result
					} else {
						this.revenueData = this.revenueData.concat(res.data.result)
					}
					console.log('营收', this.revenueData)
					this.mescroll.endBySize(res.data.result.length, res.data.result
						.total);
					// this.revenueData = res.data.result
					// 关闭下拉
					uni.stopPullDownRefresh();
					console.log('营收1', this.revenueData)
				})
			},
			godingdan() {
				this.$tools.goPageNoAuth('/clientEnd/page/ordersList/orders')
			},
			vipIndex() {
				this.$tools.goPageNoAuth('/clientEnd/page/decoration/Application')
			},
			switchTab(i) {
				switch (i) {
					case 0:
						console.log(123123123, 'ffff')
						this.$tools.goPageNoAuth('/clientEnd/page/chat/comments')
						break;
					case 1:
						this.$tools.goPageNoAuth('/clientEnd/page/decoration/help')
						break;
					case 2:
						this.$tools.goPageNoAuth('/clientEnd/page/factor/directSeeding')
						break;
					case 3:
						this.$tools.goPage('/clientEnd/page/revenue/bankCard')
						// installationMaster/installIndex
						break;
					case 4:
						this.$tools.goPage('/clientEnd/page/decoration/settings')
						break;
					default:
						//this code will execute if none of the cases match the expression
						break;
				}
			},
			clickTab(e) {
				this.tablist = e.index
			},
			// 获取系统栏高度
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			//主页
			goDetail() {
				this.$tools.goPageNoAuth('../../../clientEnd/page/decoration/homepage?data=' + JSON.stringify(this
					.listData))
			},
			// 修改个人信息
			editSignature() {
				if (this.listData.signature != null) {
					this.$tools.goPageNoAuth('../../../clientEnd/page/Information/editSignature?signature=' + this.listData
						.signature)
				} else {
					this.$tools.goPageNoAuth('../../../clientEnd/page/Information/editSignature?signature=' + this.listData
						.introduction)
				}
			}
		}
	}
</script>

<style scoped>
	.view {
		width: 152rpx;
		height: 52rpx;
		background: #9B6550;
		border-radius: 26rpx;
		text-align: center;
		line-height: 52rpx;
		color: #fff;
	}

	.head_s {
		display: flex;
		justify-content: space-between;
		text-align: center;
		line-height: 44rpx;
	}

	.head {
		width: 100%;
		/* height: 340rpx; */
		background-color: #fff;
		border-radius: 20rpx;
		padding: 48rpx 30rpx 30rpx 30rpx;
		background-image: url('/static/me/bjys.png');
		background-size: 100% 100%;
	}

	.title_l {
		font-size: 36rpx;
		font-family: Rubik-Medium, Rubik;
		font-weight: 500;
		color: #1E1E1E;
		padding: 20rpx 0;
		border-bottom: 1rpx solid rgba(30, 30, 30, 0.1);
	}

	.title_ {
		font-size: 28rpx;
		font-family: Noto Sans SC-Regular, Noto Sans SC;
		font-weight: 400;
		color: rgba(30, 30, 30, 0.3);
	}

	.titles {
		color: #fff;
		text-align: center;
		border-radius: 8rpx;
		line-height: 62rpx;
		width: 273rpx;
		height: 62rpx;
		background-color: #492D22;
		margin-top: 11rpx;
	}

	.messageImg {
		width: 88rpx;
		height: 88rpx;
	}

	.card {
		width: 690rpx;
		height: 297rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 20rpx 2rpx rgba(30, 30, 30, 0.05);
		border-radius: 20rpx;
		margin: -180rpx 30rpx 0 30rpx;
	}

	.label_a {
		width: 132rpx;
		height: 36rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: center;
		background: linear-gradient(167deg, #53EFFC 0%, #EFDBB6 100%);
		border-radius: 18rpx;
		opacity: 1;
		margin-left: 5rpx;
	}

	.debriefing {
		width: 690rpx;
		height: 274rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.debriefingConcent {
		width: 630rpx;
		height: 152rpx;
		background: rgba(73, 45, 34, 0.05);
		border-radius: 20rpx;
		margin: 0 30rpx;
	}

	.function_con {
		width: 690rpx;
		height: 334rpx;
		padding: 30rpx 0;
		margin: 30rpx 0;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
</style>